<template>
    <div id="app">
      <h1>欢迎来到租车平台</h1>
      <div v-if="!user">
        <h2>请登录或注册</h2>
        <form @submit.prevent="login">
          <label for="username">用户名</label>
          <input id="username" v-model="username" required>
          <label for="password">密码</label>
          <input id="password" v-model="password" type="password" required>
          <button type="submit">登录</button>
        </form>
        <p>还没有账号？<RouterLink to="/register">点击这里注册</RouterLink></p>
        <div v-if="showRegisterForm">
          <form @submit.prevent="register">
            <label for="newUsername">用户名</label>
            <input id="newUsername" v-model="newUsername" required>
            <label for="newPassword">密码</label>
            <input id="newPassword" v-model="newPassword" type="password" required>
            <label for="confirmPassword">确认密码</label>
            <input id="confirmPassword" v-model="confirmPassword" type="password" required>
            <button type="submit" :disabled="newPassword !== confirmPassword">注册</button>
          </form>
        </div>
      </div>
    </div>

    <RouterView></RouterView>
  </template>
  
  <script lang="ts">
  import { ref, computed } from 'vue'

  import {RouterLink,RouterView} from 'vue-router'  
  
  export default {
    name:'Home',
    setup() {
      // 模拟用户数据
      const users = [
        { username: 'admin', password: '123456' },
        { username: 'user', password: '123456' }
      ]
  
      // 模拟车辆数据
      const cars = [
        { id: 1, name: '奥迪A4', price: 100, image: 'https://i.imgur.com/1.jpg' },
        { id: 2, name: '宝马X5', price: 200, image: 'https://i.imgur.com/2.jpg' },
        { id: 3, name: '特斯拉Model 3', price: 300, image: 'https://i.imgur.com/3.jpg' }
      ]
  
      // 登录表单数据
      const username = ref('')
      const password = ref('')
  
      // 注册表单数据
      const newUsername = ref('')
      const newPassword = ref('')
      const confirmPassword = ref('')
  
      // 当前用户
      const user = ref(null)
  
      // 是否显示注册表单
      const showRegisterForm = ref(false)
  
      // 预订列表
      const bookings = ref([])
  
      // 登录方法
      const login = () => {
        // 检查用户名和密码是否匹配
        const match = users.find(u => u.username === username.value && u.password === password.value)
        if (match) {
          // 登录成功，设置当前用户
          // 清空表单数据
          username.value = ''
          password.value = ''
        } else {
          // 登录失败，提示错误信息
          alert('用户名或密码错误')
        }
      }
  
      // 注册方法
      const register = () => {
        // 检查用户名是否已存在
        const exist = users.find(u => u.username === newUsername.value)
        if (exist) {
          // 用户名已存在，提示错误信息
          alert('用户名已被占用')
        } else {
          // 用户名可用，添加到用户数据中
          users.push({ username: newUsername.value, password: newPassword.value })
          // 清空表单数据
          newUsername.value = ''
          newPassword.value = ''
          confirmPassword.value = ''
          // 隐藏注册表单
          showRegisterForm.value = false
          // 提示成功信息
          alert('注册成功，请登录')
        }
      }
  
      // 退出方法
      const logout = () => {
        // 清空当前用户
        user.value = null
        // 清空预订列表
        bookings.value = []
      }
  
      // 显示注册表单方法
      const showRegister = () => {
        // 显示注册表单
        showRegisterForm.value = true
      }
  
      // 预订方法
     
  

  
      // 返回模板中需要的数据和方法
      return {
        username,
        password,
        newUsername,
        newPassword,
        confirmPassword,
        user,
        showRegisterForm,
        cars,
        bookings,
        login,
        register,
        logout,
        showRegister,
      }
    }
  }
  </script>
<style>
/* 全局样式 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 容器样式 */
#app {
  width: 80%;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

/* 标题样式 */
h1 {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

h2 {
  text-align: center;
  color: #666;
  margin-bottom: 10px;
}

/* 表单样式 */
form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

label {
  display: block;
  margin-bottom: 5px;
}

input {
  display: block;
  width: 200px;
  height: 30px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

button {
  width: 100px;
  height: 30px;
  border: none;
  background-color: #333;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #444;
}

button:disabled {
  background-color: #999;
  cursor: not-allowed;
}

/* 车辆列表样式 */
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
}

li {
  width: 30%;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  padding: 10px;
}

img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
}

p {
  margin-bottom: 5px;
}

/* 预订列表样式 */
.bookings {
  margin-top: 20px;
  border-top: 2px solid #333;
  padding-top: 10px;
}
</style>  